@import '../../../core/index.less';
@listHeight: 40 / @remScale;
.orin-sw-retabs-root {
    .tab-list {
        display: flex;
        text-align: center;
        line-height: @listHeight;
        height: @listHeight;
        &>li {
            flex: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active {
                background: @mainColor;
                color: #fff;
            }
        }
    }
    .tabs-content {
        display: none;
        &.active {
            display: block;
        }
    }
}

.theme-dark {
    .orin-sw-retabs-root {
        background-color: @dark_bgHighlightColor3;
        border-radius: @dark_borderRadius;
        // overflow: hidden;
        &::after {
            content: '';
            display: block;
            clear: both;
        }
        .tab-list {
            background-color: @dark_bgColor;
            height: 36/@remScale;
            line-height: 36/@remScale;
            > li {
                color: @dark_fontColor;
                font-size: 12/@remScale;
                position: relative;
                svg {
                    fill: @dark_fontColor;
                }
                &.active {
                    background-color: @dark_bgHighlightColor3;
                    color: @dark_fontHighlightColor;
                }
                &:hover {
                    color: @dark_fontHighlightColor;
                }
            }
        }
        .tabs-content {
            color: @dark_fontHighlightColor;
        }
    }
}

.theme-primary {
    .orin-sw-retabs-root {
        // background-color: @dark_bgHighlightColor3;
        // border-radius: @dark_borderRadius;
        // overflow: hidden;
        &::after {
            content: '';
            display: block;
            clear: both;
        }
        
        @media (max-width: @max1 ) {
            .tab-list {
                li {
                    width: 25% !important;

                    &:first-child {
                        border-left: none;
                    }

                    &:last-of-type {
                        border-right: none;
                    }
                }
            }
        }

        .tab-list {
            background-color: @grey-line;
            height: 60/@remScale;
            line-height: 60/@remScale;
            justify-content: center;
            border-bottom: solid 1px #d7d7d7;
            > li {
                color: #8b8b8b;
                border: solid 1px #d7d7d7;
                border-bottom: none;
                border-left: none;
                font-size: 16/@remScale;
                position: relative;
                flex: none;
                width: 100 / @remScale;
                svg {
                    fill: @dark_fontColor;
                }

                &.active {
                    background-color: @white;
                    color: @blackColor;
                    border-top: 3px solid @mainColor;
                    // color: @dark_fontHighlightColor;
                }
                &:hover {
                    // color: @dark_fontHighlightColor;
                    .orin-sw-retips-root {
                        display: none !important;
                    }
                }

                &:first-child {
                    border-left: solid 1px #d7d7d7;
                }
            }
        }
        .tabs-content {
            background-color: @greyBgColor;
            // position: relative;
            // padding: 40 / @remScale 10% 80 / @remScale;
        }
    }

    .orin-sw-retabs-root.vertical {
        .tab-list {
            display: block;
            height: auto;
            float: left;
            margin-right: 20 / @remScale;

            >li {
                border: solid 1px #d7d7d7;
                width: 150 / @remScale;
                border-bottom: none;

                &.active {
                    border-left: 3px solid @mainColor;
                }
            }
        }

        .tabs-content {
            margin-left: 170 / @remScale;
        }
    }
}
